<template>
  <div style="background-color: #F0FFFF">
    <div>
      <div style="text-align: center; margin-top: 10px;">
        <span style="color: yellowgreen">{{ text }}</span>
      </div>
      <el-progress
        :percentage="progress"
        :color="customColor"
        :format="format">
      </el-progress>
    </div>
    <div class="table-container" style="overflow-y: auto; max-height: 400px;">
      <el-table
        :data="tableData"
        style="width: 100%;"
        border
        size="mini"
        :row-style="{ height: '5px' }"
        :cell-style="{ padding: '0px' }"
      >
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          width="120"
          :cell-style="{ padding: '0px' }"
          :min-width="column.prop === '发生时间' ? 150 : undefined"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        { prop: '故障代码', label: '故障代码' },
        { prop: '故障名称', label: '故障名称' },
        { prop: '故障位码', label: '故障位码' },
        { prop: '故障等级', label: '故障等级' },
        { prop: '发生时间', label: '发生时间' },
        { prop: '机车速度', label: '机车速度' },
        { prop: '网压', label: '网压' },
        { prop: '原边电流', label: '原边电流' },
        { prop: '行驶方向', label: '行驶方向' },
        { prop: '级', label: '级' }
      ],
      tableData: [
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上...', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 1...', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' }
        // ...其他数据行
      ],
      text: 'HXD2 1051A正在解析...',
      progress: 66,
      customColor: '#409EFF'
    }
  },
  methods: {
    format(percentage) {
      return `${percentage}%`
    }
  }
}
</script>
<style>
.el-progress {
  width: 80%;
  margin: 0 auto;
}

.table-container {
  margin-top: 10px;
  border: 1px solid #dfe6ec; /* 可选，为滚动容器添加边框 */
}
</style>
